<template>
  <div style=" background:#f1f1f1;">
      <div style="float:left;width: 18%;">
          <div style="width: 100%;float: left;">
              <el-tabs v-model="activeName" type="card"
                  style="margin: 0 8px 0 0;background-color: white;min-height: 50%">
                  <el-tab-pane name="jgs" label="机构树">
                      <radioOrgTree @init="init" ref="dialogRadioOrgTree" />
                  </el-tab-pane>
              </el-tabs>
              <div style="width: 97.6%;height:50px;background-color: white;border-top: solid 1px #e8eaec;">
                  <el-checkbox v-model="is_contains_org_child" style="float: left;margin: 5px 10px 0 20px">包含下级
                  </el-checkbox>
                  <el-checkbox v-model="is_show_org_inside" @change="changeOrgInsideValue()"
                      style="float: left;margin: 5px 10px 0 20px">显示内设
                  </el-checkbox>
              </div>
          </div>
      </div>
      <div style="float:left;width: 82%;">
            <el-row style="background-color:white;padding-right: 8px;margin-bottom: 8px">
                <el-col :span="24">
                    <div style="text-align: right;margin: 8px 0 8px 0;height: 35px;">
                        <el-button type="primary" plain  @click="decrease">生成标签</el-button>
                        <el-progress 
                             v-show="dialogVisibleProgress" 
                             :width=50 type="circle" 
                             :percentage="parseInt(percentage)" 
                             :color="customColors" 
                             style="float: right;margin-top: -8px;"></el-progress>
                    </div>
                </el-col>
            </el-row>
          <vxe-table 
              border 
              id="person_id"
              header-align="center" 
              ref="mytable" 
              highlight-current-row 
              highlight-hover-row
              :loading="loading" 
              :height="heightY" 
              :export-config="{modes: ['current', 'selected', 'all']}"
              :data="tableData"
              :custom-config="{storage: true, checkMethod: checkColumnMethod}"
              @checkbox-all="selectAllEvent" 
              @checkbox-change="selectChangeEvent"
          >
          <!-- :formatter="formatName" -->
              <vxe-table-column type="html" field="PERSONNAME"  title="姓名" width="200" align="center" fixed="left">
              </vxe-table-column>
              <vxe-table-column field="PERSONIDCARD" title="身份证号码" width="200" align="center" fixed="left">
              </vxe-table-column>
              <vxe-table-column field="MZ" title="汉族" width="200" align="center"></vxe-table-column>
              <vxe-table-column field="XB" title="性别" width="200" align="center"></vxe-table-column>
              <vxe-table-column field="NL" title="年龄" width="200" align="center" sortable></vxe-table-column> 
              <vxe-table-column field="ZZMM" title="政治面貌" width="200" align="center"></vxe-table-column>
              <vxe-table-column field="ZWLB" title="职位类别" width="200" align="center"></vxe-table-column>
              <vxe-table-column field="RYLB" title="人员类别" width="200" align="center"></vxe-table-column>
              <vxe-table-column field="ZGXL" title="最高学历" width="200" align="center"></vxe-table-column>           
              <vxe-table-column field="RDSJ" title="入党时间" width="200" align="center"></vxe-table-column>
              <vxe-table-column field="ZGFQRZXL" title="最高非全日制学历" width="200" align="center"></vxe-table-column>
              <vxe-table-column field="LNJCGZJL" title="两年以上基层工作经历" width="200" align="center"></vxe-table-column>
              <vxe-table-column field="GWYDJSJ" title="公务员登记时间" width="200" align="center"></vxe-table-column>
              <vxe-table-column field="ZGQRZXL" title="最高全日制学历" width="200" align="center"></vxe-table-column>
              
              <template #empty>
                  <span style="color: red;">
                      <el-image :src=image1 style="width: 200px;height: 200px"></el-image>
                      <p>未查询到任何数据！</p>
                  </span>
              </template>
          </vxe-table>
          <div class="row" style="width: 100%;">
              <div style="width: 80%;float: left">
                  <vxe-pager background align="left" :current-page.sync="pages.currentPage"
                      :page-size.sync="pages.pageSize" 
                      :total="pages.totalResult"
                      :page-sizes="[20, 50, 100, 500, 1000]"
                      :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
                      @page-change="handlePageChange2">
                  </vxe-pager>
              </div>
              <div style="width: 20%;float: right;background-color: white;height: 48px">
                   
              </div>
          </div>
      </div>
      <personRmb ref="dialogPersonRmb"  @onTop="onTop" @onBehind="onBehind"></personRmb>
      <!-- <el-dialog
          :visible.sync="dialogVisible"
          width="30%"
          >
          <span>
            <el-progress :width=125 type="circle" :percentage="40" style="margin-left: 40%"></el-progress>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
      </el-dialog> -->
  </div>
</template>

<script>
import radioOrgTree from "@/views/students/organization/common/radioOrgTreelazy";
import personRmb from '@/views/students/organization/person/personRmbNew'
import {
  getPersonTags,saveTag
} from '@/api/students/organization/person/person'
import { showLoading, hideLoading } from '@/utils/loading'

export default {
  name: 'Person',
  components: {
      radioOrgTree,
      personRmb,     
  },
  props: {},
  data () {
      return {
          dialogVisibleProgress: false,
          timeUsed: '0',
          activeName: 'jgs',
          searchvisible: false,
          form: {
              fileName: '',
              dataFiled: 'all'
          },
          centerDialogVisible: false,
          image1: require('@/views/img/null.png'),
          is_show_org_inside: true,
          is_contains_org_child: false,
          heightY: window.innerHeight - 230 + 'px',
          columns: [],
          tableData: [],
          pages: {
              currentPage: 1,
              pageSize: 20,
              totalResult: 0
          },
          selectedNode: '',
          loading: false,
          searchWithOrg: '1',
          searchManagerType: [],
          orgId: '',
          searchValue: '',
          searchValue2: '',
          multipleSelection: [],
          schemeId:'',
          percentage: Number(0), //初始百分比为100
          time: 0, //时间设定为360
          customColors: [{
              color: '#f56c6c',
              percentage: Number(20)
            },
            {
              color: '#e6a23c',
              percentage: Number(40)
            },
            {
              color: '#5cb87a',
              percentage: Number(60)
            },
            {
              color: '#1989fa',
              percentage: Number(80)
            },
            {
              color: '#6f7ad3',
              percentage: Number(100)
            }
          ],//颜色随着百分比的变化而自动变化
      }
  },
  computed: {},
  watch: {},
  created () {
      let _this = this;
      window.checkPersonQ = _this.checkPersonQ;
      // 获取所有列配置
      this.$nextTick(() => {
          this.columns = this.$refs.mytable.getColumns()
      })
      this.loading = true
  },
  mounted () {
      this.init('init')
      this.$refs.dialogRadioOrgTree.flag = 1
  },
  destroyed () {
  },
  methods: {
      decrease() {
        saveTag().then((result) => {
          console.log(result)
        })
        this.dialogVisibleProgress = true;
        let me = this;
        let interval = window.setInterval(function () {
          me.time+=10;
          me.percentage+=10
          if (me.percentage > 100) {
            me.percentage = Number(100);
            me.time = 360;
            window.clearInterval(interval);
            me.sendMsg();
          }
        }, 3500);
      },
      sendMsg(){
          this.percentage=0;
          this.time=0;              
          this.dialogVisibleProgress = false;        
      },
      onTop(id){
        if(id){
            this.tableData.forEach((item,index) =>{
              if(id == item.id){
                if(index == 0){
                  this.$message.warning('当前人员为列表第一位')
                } else {
                  this.$refs.dialogPersonRmb.initData(this.tableData[index - 1].id,this.tableData[index - 1].personEdit, '子集标签','personNew')
                }
              }
            })
          }
      },
      onBehind(id){
        if(id){
            if(id){
              this.tableData.forEach((item,index) =>{
                if(id == item.id){
                  if(index == this.tableData.length - 1 ){
                    this.$message.warning('当前人员为列表最后一位')
                  } else {
                    this.$refs.dialogPersonRmb.initData(this.tableData[index + 1].id,this.tableData[index + 1].personEdit, '子集标签','personNew')
                  }
                }
              })
            }
          }
      },
      changeOrgInsideValue () {
          if (this.is_show_org_inside == false) {
              this.$refs.dialogRadioOrgTree.flag = 0
              this.$refs.dialogRadioOrgTree.requestNewData()
          } else {
              this.$refs.dialogRadioOrgTree.flag = 1
              this.$refs.dialogRadioOrgTree.requestNewData()
          }
      },
      formatName ({ row, rowIndex }) {
            return '<a href="javascript:void(0)" style="color:#0220bf;cursor:pointer" onclick="checkPersonQ(\'' + row.id + '\',\'' + rowIndex + '\',\'' + row.personEdit + '\')">' + row.PERSONNAME + '</a>'
      },
      checkPersonQ (id, index, personEdit) {
            this.crentRowIndex = index
            this.$refs.mytable.setCurrentRow(this.tableData[index])
            if (id) {
                this.$refs.dialogPersonRmb.initData(id, personEdit, '子集标签','personNew')
            } else {
                this.$message.warning('该用户没有维护身份证号')
            }
      },
      selectAllEvent ({ checked, records }) {
          this.multipleSelection = records
      },
      selectChangeEvent ({ records }) {
          this.multipleSelection = records;
      },
      handlePageChange2 ({ currentPage, pageSize }) {
          this.pages.currentPage = currentPage
          this.pages.pageSize = pageSize
          this.init(this.selectedNode)
      },
      checkColumnMethod ({ column }) {
          if (column.property === 'xuanzhong' || column.property === 'xuhao' || column.property === 'xingming') {
              return false
          }
          return true
      },
      init (node) {
         console.log(node,"node");
          this.searchvisible = false
          this.loading = true
          this.tableData = [] 

          let isContainsOrgChild = '1'
          if (this.is_contains_org_child == false) {
              isContainsOrgChild = '0'
          }

          if (node === 'init') {
              this.loading = false
          } else if (node === 'select') {
              if (this.selectedNode === null || this.selectedNode === '') {
                  let data = this.$refs.dialogRadioOrgTree.node_had.childNodes[0].data
                  this.selectedNode = {
                      label: data.jg_mingcheng,
                      id: data.jg_id,
                      code: data.jg_bianma,
                      children: [],
                      parentId: data.jg_shangji,
                      type: data.jg_leixing,
                      icon: data.icon,
                      shortName: data.jgjc
                  }
              }
              let personJsons = {
                   "is_below":isContainsOrgChild,
                   'org_id':node.id,
                   'page': this.pages.currentPage,
                   'rows': this.pages.pageSize,
                
              }
              getPersonTags(personJsons).then(response => {
                console.log(response,"response");
                  if (response.result) {
                      this.tableData = response.resultdata.resultdata.resultdata // 填充列表数据
                  } else {
                      this.tableData = []
                      this.$message.error(response.message)
                  }
                  this.loading = false
              }).catch(() => {
                  this.loading = false
                  this.$message.error("内部错误！")
              })
          } else {
              if (this.selectedNode !== node) {
                  this.pages.currentPage = 1
              }
              this.selectedNode = node
              let personJsons = {
                "is_below":isContainsOrgChild,
                'org_id':node.id,
                'page': this.pages.currentPage,
                'rows': this.pages.pageSize,
              
              }
              getPersonTags(personJsons).then(response => {
                console.log(response,"response")
                  if (response.result) {
                      this.pages.totalResult = response.resultdata.totle // 设置总记录数
                      this.tableData = response.resultdata.resultdata.resultdata// 填充列表数据
                      console.log(this.tableData,"tableData")
                  } else {
                      this.tableData = []
                      // eslint-disable-next-line no-undef
                      this.$message.error(response.message)
                  }
                  this.loading = false
              }).catch(() => {
                  this.loading = false
                  this.$message.error("内部错误！")
              })
          }

      },
      refresh () {
          this.init(this.selectedNode)
      },
      handleClose(){
          this.dialogVisible = false;
          this.schemeId = '';
      },
  }
}
</script>

<style scoped>

/* >>>.el-progress{
      width: 35px;
      height: 35px;
} */

>>>.el-dialog__header{
  padding: 0 !important;
}
/deep/ .el-dialog__header {
  padding: 10px 10px 5px;
}

.el-col {
  margin: 3px 0 3px 0;
}

.el-tree {
  min-width: 98%;
}

.el-table {
  font-size: 12px;
}

.el-checkbox {
  display: block;
}

.el-table >>> .warning-row {
  background-color: #2f75b1;
}

.avue-view {
  padding-bottom: 10px;
}

.tree {
  overflow-x: hidden;
}

.ltp-iftable {
  width: 100%;
}

.ltp-iftable th {
  width: 100px;
  text-align: right;
}

.ltp-searchtable {
  width: 100%;
}

.ltp-searchtable th {
  font-weight: normal;
  text-align: right;
}

.ltp-searchtable tr {
  height: 50px;
}

/deep/ .vxe-table .vxe-body--column:not(.col--ellipsis) {
  padding: 3px 0;
}

/deep/ .vxe-table .vxe-footer--column:not(.col--ellipsis) {
  padding: 3px 0;
}

/deep/ .vxe-table .vxe-header--column:not(.col--ellipsis) {
  padding: 3px 0;
}

/deep/ .el-button + .el-button {
  margin-left: 0px;
}

>>>.vxe-cell--title{
  font-size: 14px;
}

>>>.vxe-table--render-default .vxe-cell{
  height: 35px;
  line-height: 35px;
}
>>>.vxe-header--row{
  height: 40px;
}
.col--ellipsis {
  height: 35px;
}
</style>
